
<script   setup>
import { computed, ref, watch } from "vue";
// 2.1.1  准备好模拟数据
const list = ref(JSON.parse(localStorage.getItem("todoList")) || []);

// 2.3.2 定义数据存储文本框输入的内容
let task = ref("");
// 2.3.3  监听键盘谈起事件
let downFn = () => {
  // 2.3.4 判断文本款的是内容是否为空 为空提示
  if (task.value.trim().length === 0) {
    return alert("任务名不能为空");
  }
  //  2.3.5 生成一个随机数
  let id = Math.random();
  //  2.3.6 把id追加进入
  list.value.push({
    id: id,
    name: task.value,
    isDone: false,
  });
  //  2.3.7 清空文本框
  task.value = "";
};
// 2.4.2 定义方法 根据id 删除数组list里某个对应的对象
const delFn = (id) => {
  list.value = list.value.filter((item) => item.id != id);
};

// 2.5.1 定义计算属性用于显示  当前数量
// 2.7.2 把页面循环铺设的数据改成  showArr
const count = computed(() => showArr.value.length);

//  2.6.1 定义getSel – 默认为显示全部
const getSel = ref("all");

// 2.6.5  点击修改getSel的值 点击全部 getSel的值 为 all   已完成 yes    未完成   no
const typeFn = (str) => {
  getSel.value = str;
};

// 2.7.1 定义计算属性 showArr 根据getSel 的值 做筛选
const showArr = computed(() => {
  if (getSel.value === "yes") {
    // 显示已完成
    return list.value.filter((item) => item.isDone === true);
  } else if (getSel.value === "no") {
    // 显示未完成
    return list.value.filter((item) => item.isDone === false);
  } else {
    return list.value; // 全部显示
  }
});

watch(
  list.value,
  () => {
    console.log(list.value)
    localStorage.setItem("todoList", JSON.stringify(list.value));
  },
  {
    deep: true,
  }
);

const isAll = computed({
  set(checked) {
    console.log(checked)
    // 只有true / false
    // 9.3 影响数组里每个小选框绑定的isDone属性
    list.value.forEach((obj) => (obj.isDone = checked));
  },
  get() {
    // 9.4 小选框统计状态 -> 全选框
    // 9.5 如果没有数据, 直接返回false-不要让全选勾选状态
    return (
      list.value.length !== 0 &&  list.value.every((obj) => obj.isDone === true)
    );
  },
});
</script>

<template>
  <div class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <!-- ++++++++2.9.1 双向绑定 -->
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        v-model="isAll"
      />
      <label for="toggle-all"></label>
      <!--     2.3.1: 输入框 – 键盘事件 – 回车按键  通过双向绑定拿到文本框中的值  -->
      <input
        @keydown.enter="downFn"
        v-model="task"
        class="new-todo"
        placeholder="输入任务名称-回车确认"
        autofocus
      />
    </header>

    <ul class="todo-list">
      <!-- completed: 完成的类名 -->
      <!-- 2.1.2 循环数据 -->
      <!-- 2.2.1   completed 是具体的css类名     item.isDone 为真具有这个类名 否则不具备这个类名 -->
      <!-- 2.7.2 把页面循环铺设的数据改成  showArr -->
      <li
        :class="{ completed: item.isDone }"
        v-for="item in showArr"
        :key="item.id"
      >
        <div class="view">
          <input class="toggle" type="checkbox"  v-model="item.isDone" />
          <label>{{ item.name }}</label>
          <!-- 2.4.1 x标签 – 点击事件 – 传入id区分 -->
          <button class="destroy" @click="delFn(item.id)"></button>
        </div>
      </li>
    </ul>

    <footer class="footer">
      <!--2.5.2 定义计算属性用于显示  当前数量 -->
      <span class="todo-count"
        >任务<strong>{{ count }}</strong></span
      >
      <ul class="filters">
        <!--  2.6.2  点击修改getSel的值 点击全部 getSel的值 为 all   -->
        <li @click="typeFn('all')">
          <!-- 2.6.3 多个class分别判断谁应该有类名  selected  -->
          <!-- 需要把原有的class删除掉  -->
          <a :class="{ selected: getSel === 'all' }" href="javascript:;"
            >全部</a
          >
        </li>
        <!--2.6.4  已完成 yes    未完成   no  -->
        <li @click="typeFn('no')">
          <a :class="{ selected: getSel === 'no' }" href="javascript:;"
            >未完成</a
          >
        </li>
        <!-- 2.6.5  未完成   no  -->
        <li @click="typeFn('yes')">
          <a :class="{ selected: getSel === 'yes' }" href="javascript:;"
            >已完成</a
          >
        </li>
      </ul>
    </footer>
  </div>
</template>

<style  scoped></style>